<template>
  <div id="app">
    <g-button
      icon=""
      iconPosition=""
      :loading="loading1"
      @click="loading1 = !loading1"
      >按钮</g-button
    >
    <g-button
      icon="settings"
      iconPosition="left"
      :loading="loading2"
      @click="loading2 = !loading2"
      >按钮</g-button
    >
    <g-button
      icon="left"
      iconPosition="right"
      :loading="loading3"
      @click="loading3 = !loading3"
      >按钮</g-button
    >
    <g-icon name="download"></g-icon>
    <g-button-group>
      <g-button icon="left">上一页</g-button>
      <g-button>更多</g-button>
      <g-button icon="right" iconPosition="right">下一页</g-button>
    </g-button-group>
    <div id="test"></div>
  </div>
</template>

</script>
<script>
import "./svg";
export default {
  name: "App",
  data() {
    return {
      loading1: false,
      loading2: true,
      loading3: false,
    };
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --button-height: 32px;
  --font-size: 14px;
  --button-bg: #fff;
  --button-active-bg: #eee;
  --border-radius: 4px;
  --color: #333;
  --border-color: #999;
  --border-color-hover: #666;
}
#app {
  padding: 20px;
}
</style>
